// 基础变量定义
@mobile-breakpoint: 750px;
@label-color: #666;
@value-color: #333;
@border-color: #f0f0f0;
@brand-color: var(--td-brand-color);
@success-color: var(--td-success-color);
@spacing-sm: 8px;
@spacing-md: 12px;
@spacing-lg: 16px;

.user_container {
  width: 100%;

  .user_banner {
    width: 100%;
    height: 200px;
    background: url("@/assets/user-banner.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .user_banner_title {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 30px;
      color: #ffffff;
    }

    .user_mobile_info {
      display: none;
      width: 100%;
      padding: 0 24px;
      align-items: center;
      justify-content: space-between;

      .user_mobile_info_box {
        display: flex;
        align-items: center;

        img {
          width: 122px;
          height: 122px;
        }

        .user_mobile_info_text {
          width: calc(100% - 142px);
          height: 122px;
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .user_mobile_info_text_name {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 36px;
            line-height: 46px;
            color: #ffffff;
            margin-bottom: 15px;
          }

          .user_mobile_info_text_phone {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            line-height: 32px;
            color: #ffffff;
            opacity: 0.78;
          }
        }

        .user_mobile_info_edit {
          width: 38px;
          height: 38px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .user_list,
  .user_list_mobile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .user_list_tabs_box {
      width: 100%;
      height: 100px;
      background: rgba(173, 33, 33, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;

      .user_list_tabs {
        height: 100%;
        display: flex;
        align-items: center;

        .user_list_tabs_item {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 20px;
          margin-right: 120px;
          cursor: pointer;
        }

        .user_list_tabs_item_active {
          color: #333333;
          color: #ad2121;
        }
      }
    }

    .user_list_content {
      padding: 10px;

      .user_list_content_breadcrumb {
        display: flex;
        justify-content: flex-end;
      }

      .user_list_content_title {
        display: flex;
        align-items: center;
        font-family: Microsoft YaHei;
        margin: 45px 0;

        h2 {
          font-weight: 400;
          font-size: 30px;
          color: #333333;
        }

        h4 {
          font-weight: 300;
          font-size: 14px;
          color: #666666;
          margin: 0 10px;
          text-transform: uppercase;
        }

        /* img {
          width: 14px;
          height: 14px;
        } */
      }

      .user_list_content_box {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .user_list_content_box_left {
          width: 259px;
          height: 319px;
          background: #ffffff;
          box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
          padding: 30px 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          border-radius: 10px;

          img {
            width: 192px;
            height: 194px;
          }

          .user_upload_btn {
            width: 200px;
            height: 40px;
            background: #ad2121;
            border: 1px solid #ad2121;
            border-radius: 0;
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            line-height: 78px;
            text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
            margin-top: 12px;
          }
        }

        .user_list_content_box_right {
          width: calc(100% - 279px);
          display: flex;
          align-items: center;
          flex-direction: column;

          .user_list_content_box_right_item {
            border-radius: 10px;
            width: 100%;
            margin-bottom: 30px;
            background: #ffffff;
            box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
            padding: 22px 30px 22px 0;

            .user_list_content_box_right_item_title {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 20px;
              color: #333333;
              padding-left: 12px;
              border-left: 4px solid #ad2121;
              display: flex;
              align-items: center;
              justify-content: space-between;

              img {
                width: 24px;
                height: 24px;
                cursor: pointer;
              }

              .t-icon {
                cursor: pointer;
              }
            }

            .user_info_form {
              margin-top: 30px;
              width: 100%;
              padding-left: 30px;

              .user_info_form_mobile {
                display: none;
              }

              .user_info_form_btn {
                margin-top: 20px;
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;

                .t-button {
                  width: 120px;
                  height: 30px;
                  background: #ad2121;
                  border: 1px solid #ad2121;
                  border-radius: 0;
                  font-weight: bold;
                  font-size: 14px;
                  color: #ffffff;
                }

                .cancel-btn {
                  background-color: #666666;
                  border: 1px solid #666666;
                }
              }
            }

            .user_list_content_box_right_item_table {
              width: 100%;
              margin-top: 30px;
              padding-left: 30px;

              /* .user_list_content_box_right_item_table_mdoel {
                display: none;
              } */
              // 通用样式
              .user_list_content_box_right_item_table_mdoel {
                width: 100%;
                font-size: 14px;
                display: none;

                // 列表项基础样式
                .user_info_form_mobile_item {
                  width: 100%;
                  height: 200px;
                  background: #ffffff;
                  border-radius: 1px;
                  border: 1px solid #e3e3e3;
                  display: flex;
                  // flex-wrap: wrap;
                  align-items: center;
                  justify-content: space-between;
                  padding: 20px 10px;
                  border-bottom: 1px solid @border-color;
                  margin-bottom: 22px;

                  .user_info_form_mobile_item_img {
                    width: 100px;
                    height: 100px;
                    margin-right: 10px;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .user_info_form_mobile_left {
                    width: calc(100% - 180px);
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  }

                  .user_info_form_mobile_type {
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 18px;
                    color: #333333;
                  }

                  .user_info_form_mobile_name {
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 14px;
                    color: #333333;
                  }

                  .user_info_form_mobile_time {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #666666;
                  }

                  // 值样式
                  /* .user_info_form_mobile_value {
                    width: 75%;
                    color: @value-color;
                  } */
                  .user_info_form_mobile_btn {
                    .t-button {
                      width: 80px;
                      height: 40px;
                      background: #ad2121;
                      border-color: #ad2121;
                      border-radius: 30px;
                      text-align: center;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      font-size: 18px;
                      color: #ffffff;
                      line-height: 78px;
                      text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
                    }
                  }
                }
              }

              .user_list_content_box_right_item_table_table {
                border-color: #ad2121;

                :deep(.t-table__content) {
                  border-color: #ad2121;
                  border-radius: 0;

                  th {
                    background: #ad2121;
                    font-weight: bold;
                    font-size: 16px;
                    color: #ffffff;
                    border-color: #fff;
                  }

                  td {
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                    border-color: #ad2121;
                  }

                  .table_btn_link {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .t-button-link {
                      color: #ad2121;
                      display: flex;
                      align-items: center;

                      i {
                        display: inline-block;
                        width: 22px;
                        height: 16px;
                        background: url("@/assets/user-view.png") no-repeat center;
                        background-size: 100% 100%;
                        margin-right: 4px;
                      }
                    }

                    .link-download {
                      color: #00a76a;

                      i {
                        display: inline-block;
                        width: 17px;
                        height: 18px;
                        background: url("@/assets/user-dwon.png") no-repeat center;
                        background-size: 100% 100%;
                        margin-right: 4px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .user_menu_list {
    display: none;
    margin: 48px 0;

    .user_menu_list_item {
      width: 100%;
      height: 90px;
      background: #ffffff;
      border-radius: 1px;
      border: 1px solid #e3e3e3;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24px;

      .user_menu_list_item_left {
        display: flex;
        align-items: center;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 24px;
        color: #333333;

        img {
          width: 38px;
          height: 38px;
          margin-right: 16px;
        }
      }

      .user_menu_list_item_right {
        .t-icon {
          font-size: 38px;
        }
      }
    }
  }
}

@media screen and (min-width: 376px) and (max-width: @mobile-breakpoint) {
  .user_container {
    .user_banner {
      background: url("@/assets/user-banner-mobile.png") no-repeat center;
      background-size: 100% 100%;
      height: 323px;

      .user_mobile_info {
        display: flex;
      }
    }

    .user_list,
    .user_list_mobile {
      display: none;

      .user_list_content {
        width: 100% !important;
        padding: 0 15px;

        .user_list_content_breadcrumb {
          display: none;
        }

        .user_list_content_title {
          display: none;
          margin: 20px 0;

          h2 {
            font-size: 20px;
          }

          h4 {
            font-size: 16px;
          }
        }

        .user_list_content_box {
          flex-direction: column;

          .user_list_content_box_left {
            width: 100%;
            text-align: center;
            display: none;

            img {
              width: 100px;
              height: 100px;
            }

            .user_upload_btn {
              margin: 15px 0;
            }
          }

          .user_list_content_box_right {
            width: 100%;
            margin-left: 0;
            margin-top: 20px;

            .user_list_content_box_right_item {
              padding: 15px 0;
              background-color: transparent;
              box-shadow: none;

              .user_info_form {
                .t-descriptions {
                  display: none;
                }

                .user_info_form_mobile {
                  width: 100%;
                  padding: 20px 0;
                  display: block;

                  .user_info_form_mobile_item {
                    width: 100%;
                    margin-top: 12px;
                    display: flex;
                    align-items: center;

                    .user_info_form_mobile_label {
                      width: 100px;
                      text-align: left;
                      font-weight: 400;
                      font-size: 14px;
                      color: #666666;
                    }

                    .user_info_form_mobile_value {
                      width: calc(100% - 100px);
                      text-align: left;
                      font-weight: 400;
                      font-size: 16px;
                      color: #333333;
                    }
                  }
                }

                :deep(.t-form) {
                  .t-space-item {
                    width: 100%;

                    .t-col-6 {
                      width: 100%;
                      max-width: 100%;
                    }
                  }
                }
              }

              .user_list_content_box_right_item_table {
                padding: 0;

                .user_list_content_box_right_item_table_table {
                  display: none;
                }

                .user_list_content_box_right_item_table_mdoel {
                  display: block;

                  // 列表项基础样式
                  .user_info_form_mobile_item {
                    width: 100%;
                    height: 200px;
                    background: #ffffff;
                    border-radius: 1px;
                    border: 1px solid #e3e3e3;
                    display: flex;
                    // flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                    padding: 20px 10px;
                    border-bottom: 1px solid @border-color;
                    margin-bottom: 22px;

                    .user_info_form_mobile_item_img {
                      width: 100px;
                      height: 100px;

                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }

                    .user_info_form_mobile_left {
                      width: calc(100% - 180px);
                      height: 80px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    }

                    .user_info_form_mobile_type {
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      font-size: 18px;
                      color: #333333;
                    }

                    .user_info_form_mobile_name {
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      font-size: 14px;
                      color: #333333;
                    }

                    .user_info_form_mobile_time {
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      color: #666666;
                    }

                    // 值样式
                    /* .user_info_form_mobile_value {
                    width: 75%;
                    color: @value-color;
                  } */
                    .user_info_form_mobile_btn {
                      .t-button {
                        width: 80px;
                        height: 40px;
                        background: #ad2121;
                        border-color: #ad2121;
                        border-radius: 30px;
                        text-align: center;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        font-size: 18px;
                        color: #ffffff;
                        line-height: 78px;
                        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .user_list_mobile {
      display: flex;
      padding-top: 100px;
    }

    .user_menu_list {
      display: flex;
      flex-direction: column;
    }
  }
}

@media screen and (max-width: 375px) {
  .user_container {
    .user_banner {
      background: url("@/assets/user-banner-mobile.png") no-repeat center;
      background-size: 100% 100%;
      height: 212px;

      .user_mobile_info {
        display: flex;

        .user_mobile_info_left {
          img {
            width: 100px;
            height: 100px;
          }
        }
      }
    }

    .user_list,
    .user_list_mobile {
      display: none;

      .user_list_content {
        width: 100% !important;
        padding: 0 15px;

        .user_list_content_breadcrumb {
          display: none;
        }

        .user_list_content_title {
          display: none;
          margin: 20px 0;

          h2 {
            font-size: 20px;
          }

          h4 {
            font-size: 16px;
          }
        }

        .user_list_content_box {
          flex-direction: column;

          .user_list_content_box_left {
            width: 100%;
            text-align: center;
            display: none;

            img {
              width: 100px;
              height: 100px;
            }

            .user_upload_btn {
              margin: 15px 0;
            }
          }

          .user_list_content_box_right {
            width: 100%;
            margin-left: 0;
            margin-top: 20px;

            .user_list_content_box_right_item {
              padding: 10px 0;
              background-color: transparent;
              box-shadow: none;

              .user_info_form {
                .t-descriptions {
                  display: none;
                }

                .user_info_form_mobile {
                  width: 100%;
                  padding: 20px 0;
                  display: block;

                  .user_info_form_mobile_item {
                    width: 100%;
                    margin-top: 12px;
                    display: flex;
                    align-items: center;

                    .user_info_form_mobile_label {
                      width: 100px;
                      text-align: left;
                      font-weight: 400;
                      font-size: 14px;
                      color: #666666;
                    }

                    .user_info_form_mobile_value {
                      width: calc(100% - 100px);
                      text-align: left;
                      font-weight: 400;
                      font-size: 16px;
                      color: #333333;
                    }
                  }
                }

                :deep(.t-form) {
                  .t-space-item {
                    width: 100%;

                    .t-col-6 {
                      width: 100%;
                      max-width: 100%;
                    }
                  }
                }
              }

              .user_list_content_box_right_item_table {
                padding: 0;

                .user_list_content_box_right_item_table_table {
                  display: none;
                }

                .user_list_content_box_right_item_table_mdoel {
                  display: block;

                  // 列表项基础样式
                  .user_info_form_mobile_item {
                    width: 100%;
                    height: 140px;
                    background: #ffffff;
                    border-radius: 1px;
                    border: 1px solid #e3e3e3;
                    display: flex;
                    // flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                    padding: 20px 10px;
                    border-bottom: 1px solid @border-color;
                    margin-bottom: 22px;

                    .user_info_form_mobile_item_img {
                      width: 80px;
                      height: 80px;

                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }

                    .user_info_form_mobile_left {
                      width: calc(100% - 140px);
                      height: 80px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    }

                    .user_info_form_mobile_type {
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      font-size: 18px;
                      color: #333333;
                    }

                    .user_info_form_mobile_name {
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      font-size: 14px;
                      color: #333333;
                    }

                    .user_info_form_mobile_time {
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      color: #666666;
                    }

                    // 值样式
                    /* .user_info_form_mobile_value {
                    width: 75%;
                    color: @value-color;
                  } */
                    .user_info_form_mobile_btn {
                      .t-button {
                        width: 60px;
                        height: 40px;
                        background: #ad2121;
                        border-color: #ad2121;
                        border-radius: 30px;
                        text-align: center;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        font-size: 14px;
                        color: #ffffff;
                        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .user_list_mobile {
      display: flex;
      padding-top: 100px;
    }

    .user_menu_list {
      display: flex;
      flex-direction: column;
    }
  }
}